<!DOCTYPE html>
<style>
    .fade-enter-active,
    .fade-leave-active {
        transition: opacity .75s ease;
    }

    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }

    .child-view {
        position: absolute;
        transition: all .75s cubic-bezier(.55, 0, .1, 1);
    }

    .slide-left-enter,
    .slide-right-leave-active {
        opacity: 0;
        -webkit-transform: translate(30px, 0);
        transform: translate(30px, 0);
    }

    .slide-left-leave-active,
    .slide-right-enter {
        opacity: 0;
        -webkit-transform: translate(-30px, 0);
        transform: translate(-30px, 0);
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.0.3/dist/vue-router.min.js"></script>
<div id="app"></div>
<script src="./transition.js"></script>